@import './variables.less';
@import '../../style/mixins.less';

.fnx-loading {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	color: var(--fnx-loading-spinner-color);

	.fnx-icon {
		display: inline-block;
		vertical-align: middle;
		font-size: var(--fnx-loading-spinner-size);
	}

	&__text {
		display: inline-block;
		vertical-align: middle;
		margin-left: var(--fnx-padding-xs);
		color: var(--fnx-loading-text-color);
		font-size: var(--fnx-loading-text-font-size);
	}

	&--vertical {
		display: flex;
		flex-direction: column;
		align-items: center;

		.fnx-loading__text {
			margin: var(--fnx-padding-xs) 0 0;
		}
	}
}
